<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>15-JS DOM</title>
</head>
<body>
    
    <div>
        <img id="fig1" src="dom-tree.png" alt="" width="600">
    </div>

    <div id="box1">
        这是一个ID选择器标签
    </div>

    <div class="box2">
        这是一个类选择器标签
    </div>

    <div >
        这是一个普通标签
    </div>

    

    <script>
        let elem_id = document.getElementById('box1');
        console.log(elem_id);

        let elem_class = document.getElementsByClassName('box2');
        console.log(elem_class);

        var elem_tag = document.getElementsByTagName('div');
        console.log(elem_tag);
        

        // elem_id.innerHTML = '<a href="#">修改标签</a> ';
        elem_class.innerText = '<a href="#">修改标签</a> ';

        fig1 = document.getElementById('fig1');

        fig1.onclick = function () {
            alert('dom 属性按键触发');
        }
        
        elem_id.addEventListener('click', function () {
            alert('dom 属性按键触发-addEventListener');

        })

    </script>
</body>
</html>